﻿@model CantinhodaCegonha.Models.RegisterModel
@using CantinhodaCegonha.Models.Helpers;

@{
    ViewBag.Title = "Torne-se membro do cantinho da cegonha";
    
}

<link href="../../Content/fileuploader.css" rel="stylesheet" type="text/css" />
@*<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>*@
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<script src="../../Scripts/fileuploader.js" type="text/javascript"></script>


<script type="text/javascript">
    $(document).ready(function ($) {

        $.validator.addMethod("date",
        function (value, element) {
            var bits = value.match(/([0-9]+)/gi), str;
            if (!bits)
                return this.optional(element) || false;
            str = bits[1] + '/' + bits[0] + '/' + bits[2];
            return this.optional(element) || !/Invalid|NaN/.test(new Date(str));
        },"Please enter a date in the format dd/mm/yyyy");

        $('.date').rules('add', { date: true });

        var inputs = document.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            // test to see if the hint span exists first
            if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
                // the span exists!  on focus, show the hint
                inputs[i].onfocus = function () {
                    this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
                }
                // when the cursor moves away from the field, hide the hint
                inputs[i].onblur = function () {
                    this.parentNode.getElementsByTagName("span")[0].style.display = "none";
                }
            }
        }
        // repeat the same tests as above for selects
        var selects = document.getElementsByTagName("select");
        for (var k = 0; k < selects.length; k++) {
            if (selects[k].parentNode.getElementsByTagName("span")[0]) {
                selects[k].onfocus = function () {
                    this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
                }
                selects[k].onblur = function () {
                    this.parentNode.getElementsByTagName("span")[0].style.display = "none";
                }
            }
        }


        $("#Email").change(function () { //if theres a change in the username textbox

            if (!$("form:first").validate().element("#Email")) {
                $("#availability_status").html('<div style="margin-right: -75px;"></div>');
                $('#btnsubmit').attr('disabled', 'disabled');
                return false;
            }

            var email = $("#Email").val(); //Get the value in the username textbox
            if (email.length > 3)//if the lenght greater than 3 characters
            {
                $("#availability_status").html('<div style="margin-right: -75px;"><img align="absmiddle" style="width: 20px;" src="../content/images/loader.gif"> Verificar disponibilidade...</div>');

                $("#availability_status").show("fast");

                $.post("/Account/CheckAvailability",
                    { email: email },
                    function (data) {
                        var myObject = eval('(' + data + ')');
                        var newid = myObject;
                        if (newid == 0) {
                            $("#availability_status").html('<img src="../content/images/available.png" align="absmiddle"> <font color="Green">Disponivel</font>  ');
                            $('#btnsubmit').removeAttr('disabled');
                        }
                        else {
                            $("#availability_status").html('<img src="../content/images/not_available.png" align="absmiddle"> <font color="red">Indisponivel </font>');
                            $('#btnsubmit').attr('disabled', 'disabled');
                        }
                    });
            }
            else {

                $("#availability_status").html('<font color="#cc0000">Username muito pequeno.</font>');
                $('#btnsubmit').attr('disabled', 'disabled');
            }
            return false;
        });

        $("#Email").focus(function () {
            $("#availability_status").hide();
        });

        $("#Email").blur(function () {
            $("#availability_status").show();
        });

        $("#TentarEngravidar").click(function () {
            if (this.checked) {
                $(".umfilho").hide("fast"); $(".maisfilhos").hide("fast");
                $(':input', '.maisfilhos')
                    .not(':button, :submit, :reset, :hidden')
                    .val('')
                    .removeAttr('checked')
                    .removeAttr('selected');
                $(':input', '.umfilho')
                    .not(':button, :submit, :reset, :hidden')
                    .val('')
                    .removeAttr('checked')
                    .removeAttr('selected');
            }
            else { $(".umfilho").show("fast"); }
        });


        $("#mostrarfilhos").click(function () {
            $(".maisfilhos").toggle("fast");
            if ($(this).text() == "Pretendo adicionar mais filhos com menos de 10 anos")
            { $(this).text("Pretendo adicionar apenas um filho"); } else {
                $(this).text("Pretendo adicionar mais filhos com menos de 10 anos");
                $(':input', '.maisfilhos')
                    .not(':button, :submit, :reset, :hidden')
                    .val('')
                    .removeAttr('checked')
                    .removeAttr('selected');
            }
        });

        $(".calculator").popupWindow({
            centerScreen: 1,
            height: 500,
            width: 800
        });


        var uploader = new qq.FileUploader({
            element: document.getElementById('file-uploader'),
            allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
            sizeLimit: 2147483647, // max size
            action: '/Tools/FotoUpload',
            multiple: false,
            onSubmit: function (id, fileName) {
                $("#file-uploader .qq-upload-list").children().remove();
            },
            onComplete: function (id, fileName, responseJSON) {
                $("#Foto").val(responseJSON.filename);
                $("#fotoPai").attr("src", responseJSON.fullfile);
            }
        });

        var uploader2 = new qq.FileUploader({
            element: document.getElementById('file-uploader-0'),
            allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
            sizeLimit: 2147483647, // max size
            action: '/Tools/FotoUpload',
            multiple: false,
            onSubmit: function (id, fileName) {
                $("#file-uploader-0 .qq-upload-list").children().remove();
            },
            onComplete: function (id, fileName, responseJSON) {
                $("#Fotofilho0").val(responseJSON.filename);
                $("#fotofilho0").attr("src", responseJSON.fullfile);
            }
        });

        var uploader3 = new qq.FileUploader({
            element: document.getElementById('file-uploader-1'),
            allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
            sizeLimit: 2147483647, // max size
            action: '/Tools/FotoUpload',
            multiple: false,
            onSubmit: function (id, fileName) {
                $("#file-uploader-1 .qq-upload-list").children().remove();
            },
            onComplete: function (id, fileName, responseJSON) {
                $("#Fotofilho-1").val(responseJSON.filename);
                $("#fotofilho-1").attr("src", responseJSON.fullfile);
            }
        });

        var uploader4 = new qq.FileUploader({
            element: document.getElementById('file-uploader-2'),
            allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
            sizeLimit: 2147483647, // max size
            action: '/Tools/FotoUpload',
            multiple: false,
            onSubmit: function (id, fileName) {
                $("#file-uploader-2 .qq-upload-list").children().remove();
            },
            onComplete: function (id, fileName, responseJSON) {
                $("#Fotofilho-2").val(responseJSON.filename);
                $("#fotofilho-2").attr("src", responseJSON.fullfile);
            }
        });

        var uploader5 = new qq.FileUploader({
            element: document.getElementById('file-uploader-3'),
            allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
            sizeLimit: 2147483647, // max size
            action: '/Tools/FotoUpload',
            multiple: false,
            onSubmit: function (id, fileName) {
                $("#file-uploader-3 .qq-upload-list").children().remove();
            },
            onComplete: function (id, fileName, responseJSON) {
                $("#Fotofilho-3").val(responseJSON.filename);
                $("#fotofilho-3").attr("src", responseJSON.fullfile);
            }
        });


    });
</script>

<div class="leftCol">
@Html.Partial("_PubVertical")

<div class="clear"></div>
</div>
<div class="centerCol" style="width:750px;margin-left:40px;">	
<h1>Torne-se um membro do cantinho da cegonha</h1>


@using (Html.BeginForm())
{
    @Html.ValidationSummary(true, "Ocorreu um erro ao criar a conta. Por favor corriga os erros e tente novamente.")
    <div>
        <fieldset class="fieldset_log">
        <h2 style="margin-bottom: -22px; text-decoration: underline; font-size: 15px;color:#59890C;">1.Dados de acesso</h2>
        <ol>
          <li>
            <div>
                @Html.LabelFor(m => m.UserName)
                @Html.TextBoxFor(m => m.UserName, new { @class = "input-text" })
                <span class="hint">Indique o seu nome.<span class="hint-pointer">&nbsp;</span></span>
                @Html.ValidationMessageFor(m => m.UserName)
            </div>
            </li>
            <li>
            <div>
                @Html.LabelFor(m => m.Email)
                @Html.TextBoxFor(m => m.Email, new { @class = "input-text" })
                <span class="hint">Indique um email válido.<br />Irá receber um email de confirmação na sua caixa de correio.<span class="hint-pointer">&nbsp;</span></span>
                @Html.ValidationMessageFor(m => m.Email)
                 <span id="availability_status" style="right: -98px; position: absolute; margin-top: -30px; "></span> 
            </div>
            </li>
            <li>
            <div>
                @Html.LabelFor(m => m.Password)
                @Html.PasswordFor(m => m.Password, new { @class = "input-text" })
                <span class="hint">Indique uma password válida.<br />Minimo de  @Membership.MinRequiredPasswordLength caracteres.<span class="hint-pointer">&nbsp;</span></span>
                @Html.ValidationMessageFor(m => m.Password)
            </div>
            </li>
            <li>
            <div>
                @Html.LabelFor(m => m.ConfirmPassword, new { style = "width:175px" })
                @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "input-text" })
                <span class="hint">Repita a password, para evitar enganos.<span class="hint-pointer">&nbsp;</span></span>
                @Html.ValidationMessageFor(m => m.ConfirmPassword)
            </div>
            </li>
              <p><h2 style="margin-bottom: -22px; text-decoration: underline; font-size: 15px;color:#59890C;">2.Informação adicional</h2></p>
            <li>
            <div> 
                <label for="file-uploader">A sua foto</label>
                <span id="file-uploader"></span>
            </div>
            <img id="fotoPai" src="../../Content/Images/anonM.gif" alt="foto" style="width:50px;height:50px;float: right; margin-right: -60px; margin-top: -45px;" />
                <input type="hidden" name="Foto" id="Foto" />
            </li>
            <li>
            <div>
                @Html.LabelFor(m => m.SouPai)
                @Html.CheckBoxFor(m => m.SouPai, new { style = "margin-top: 12px; margin-left: 50%;" })
            </div>
            </li>
            <li>
            <div>
                @Html.LabelFor(m => m.TentarEngravidar)
                @Html.CheckBoxFor(m => m.TentarEngravidar, new { style = "margin-top: 12px; margin-left: 50%;" })
            </div>
            </li>


            <li class="umfilho">
            <div>
                <label for="filhos[0].Nome">Nome</label>
                <input type="text" name="filhos[0].Nome" id="filhos[0].Nome" class="input-text"/>
                <span class="hint">Indique o nome do seu bebé.<span class="hint-pointer">&nbsp;</span></span>
            </div>
            </li>
            <li class="umfilho">
            <div> 
                <label for="file-uploader-0">Foto filho</label>
                <span id="file-uploader-0"></span>
            </div>
            <img id="fotofilho0" src="../../Content/Images/miudo.png" alt="foto" style="width:50px;height:50px;float: right; margin-right: -60px; margin-top: -45px;" />
                <input type="hidden" name="filhos[0].Foto" id="Fotofilho0" />
            </li>
            <li class="umfilho">
            <div>
                <label for="filhos[0].DataNascimento">Data nascimento</label>
                <input type="text" style="float:left;width:200px;" name="filhos[0].DataNascimento" id="filhos[0].DataNascimento" class="input-text date"/>
                <span class="hint">Indique a data de nascimento ou a data prevista para o parto.<span class="hint-pointer">&nbsp;</span></span>
                <a class="calculator" href="../Tools/OvulationCalc"><img src="../content/images/calculator.png" alt="Calcular data de nascimento" title="Calcular data de nascimento" style="float: right;"/></a>
            </div>
            </li>
             <li class="umfilho">
            <div style="border-bottom: 5px solid #59890C; padding-bottom: 10px;" >
                <label for="filhos[0].Genero">Género</label>
                <div style="margin-left:10%;padding-top:10px;">
                    <input type="radio" value="M" name="filhos[0].Genero" /> Menino
                    <input type="radio" value="F" name="filhos[0].Genero" /> Menina
                    <input type="radio" value="X" name="filhos[0].Genero" /> Não sabe
                </div>
            </div>
            </li>

            <li><span><a href="javascript:void(0)" class="umfilho" id="mostrarfilhos" style="margin-left:80px;">Pretendo adicionar mais filhos com menos de 10 anos</a></span></li>
            
            @for (int i = 1; i < 4; i++)
            {
            <li style="display:none" class="maisfilhos">
            <div>
                <label for="filhos[@i].Nome">Nome</label>
                <input type="text" name="filhos[@i].Nome" id="filhos[@i].Nome" class="input-text"/>
                <span class="hint">Indique o nome do seu bebé.<span class="hint-pointer">&nbsp;</span></span>
            </div>
            </li>
            <li style="display:none" class="maisfilhos">
            <div> 
                <label for="file-uploader-@i">Foto filho</label>
                <span id="file-uploader-@i"></span>
            </div>
            <img id="fotofilho-@i" src="../../Content/Images/miudo.png" alt="foto" style="width:50px;height:50px;float: right; margin-right: -60px; margin-top: -45px;" />
                <input type="hidden" name="filhos[@i].Foto" id="Fotofilho-@i" />
            </li>
            <li style="display:none" class="maisfilhos">
            <div>
                <label for="filhos[@i].DataNascimento">Data nascimento</label>
                <input type="text" style="float:left;width:200px;" name="filhos[@i].DataNascimento" id="filhos[@i].DataNascimento" class="input-text date"/>
                <span class="hint">Indique a data de nascimento ou a data prevista para o parto.<span class="hint-pointer">&nbsp;</span></span>
            </div>
            </li>
             <li style="display:none;" class="maisfilhos">
            <div style="border-bottom: 5px solid #59890C; padding-bottom: 10px;" >
                <label for="filhos[@i].Genero">Género</label>
                <div style="margin-left:10%;padding-top:10px;">
                    <input type="radio" value="M" name="filhos[@i].Genero" /> Menino
                    <input type="radio" value="F" name="filhos[@i].Genero" /> Menina
                    <input type="radio" value="X" name="filhos[@i].Genero" /> Não sabe
                </div>
            </div>
            </li>
            }

            <li>
            <div>
                @Html.LabelFor(m => m.EmailParceiro)
                @Html.TextBoxFor(m => m.EmailParceiro, new { @class = "input-text" })
                <span class="hint">Indique o email do seu parceiro(a). Um convite será enviado para o seu parceiro(a), podem assim seguir o crescimento do seu filho em conjunto.<span class="hint-pointer">&nbsp;</span></span>
                @Html.ValidationMessageFor(m => m.EmailParceiro)
            </div>
            </li>
            <p><h2 style="margin-bottom: -22px; text-decoration: underline; font-size: 15px;color:#59890C;">3.Updates no email</h2></p>
            @foreach (var item in Helpers.GetNewsLetters())
            {
            <li>
                <div>
                @Html.Label(item.Nome)
                <input id="@item.Nome" name="Newsletter" type="checkbox" value="@item.Id" checked="checked" />
                </div>
            </li>  
            }
            


            <li style="text-align:center">
                <input type="submit" value="Confirmar registo" id="btnsubmit"/>
            </li>

        </ol>
        </fieldset>
    </div>
}
<div class="clear"></div>
</div>

<div class="clear"></div>


